<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" size="mini" @click="centerDialogVisible = true">添加歌手</el-button>
      </div>
    </div>
    <el-dialog title="添加歌手" :visible.sync="centerDialogVisible" width="400px" center>
      <el-form :model="registerForm" ref="registerForm" label-width="80px">
        <el-form-item prop="name" label="歌手名" size="mini">
          <el-input v-model="registerForm.name" placeholder="请输入歌手名"/>
        </el-form-item>
        <el-form-item prop="sex" label="性别" size="mini">
          <el-radio-group v-model="registerForm.sex">
            <el-radio :label="0">女</el-radio>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">组合</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="birth" label="出生日期" size="mini">
          <el-input type="date" v-model="registerForm.birth" placeholder="请选择出生日期"/>
        </el-form-item>
        <el-form-item prop="location" label="地区" size="mini">
          <el-input v-model="registerForm.location" placeholder="请输入地区"/>
        </el-form-item>
        <el-form-item prop="introduction" label="简介" size="mini">
          <el-input v-model="registerForm.introduction" placeholder="简介"/>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="mini" @click="centerDialogVisible = false">取消</el-button>
        <el-button size="primary" @click="">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "Singer",
  data(){
    return {
      centerDialogVisible: false,
      registerForm:{
        name: '',
        sex: '0',
        pic:'',
        birth: '',
        location: '',
        introduction: ''
      }
    }
  }
}
</script>

<style scoped>
.handle-box{
  margin-bottom: 20px;
}
</style>
